<template>
	<view>

		<!-- <view class="tips">填入药胜中台系统提供的店铺编号进行店铺绑定</view> -->
		<view class="flex align-center justify-between cell">
			<view>店铺编号</view>
			<view>
				<input v-model="formData.centShopId" class="uni-input" placeholder="请填写店铺编号" />
			</view>
			<view class="flex align-center text-right">
				<button class="btn-css" @click="handleGetCentShopByCentShopId">
					验证店铺
				</button>
			</view>
		</view>

		<view class="flex align-center   cell">
			<view>店铺名称</view>
			<view style="margin-left: 30rpx;">
				<input v-model="centShopInfo.companyName" disabled style="width: 150%;" />
			</view>
		</view>
		<view class="flex align-center cell">
			<view>联系人</view>
			<view style="margin-left: 30rpx;">
				<input v-model="centShopInfo.lianxiName" style="width: 150%;" />
			</view>
		</view>

		<view class="flex align-center  cell">
			<view>联系电话</view>
			<view style="margin-left: 30rpx;">
				<input v-model="centShopInfo.lianxiPhone" style="width: 150%;" />
			</view>
		</view>
		<view class="comfirm-css" @click="handleAddUserInfoCentShop">确认绑定店铺</view>
	</view>
</template>

<script>
	import {
		baseUrl,
		header
	} from '@/common/config.js'

	import {
		getCentShopByCentShopId,
		addUserInfoCentShop
	} from '@/common/api/api.js'


	export default {
		data() {
			return {
				name: '微信用户',
				formData: {
					centShopId: '',
					companyName: '',
				},
				centShopInfo: {},
				check: false
			}
		},
		// onUnload() {
		// 	uni.reLaunch({
		// 		url: '/pages/index/index'
		// 	})
		// },
		onLoad() {
			console.log("userinfo", this.$store.state.$userInfo);
			this.formData.userInfoId = this.$store.state.$userInfo.id;
		},
		methods: {
			handleGetCentShopByCentShopId() {
				if (this.formData.centShopId) {
					getCentShopByCentShopId({
						id: this.formData.centShopId
					}).then(res => {
						if (res.data) {
							this.centShopInfo = res.data;
							this.centShopInfo.lianxiName=res.data.lianxiUser;
							this.check = true;
						} else {
							uni.$u.toast("未查询到店铺！");
						}

					})
				} else {
					uni.$u.toast("请输入店铺编号！");
				}

			},
			handleAddUserInfoCentShop() {
				if (!this.formData.centShopId) {
					uni.$u.toast("请输入店铺编号！");
					return;
				}
				if (!this.check) {
					uni.$u.toast("请先验证店铺！");
					return;
				}
				if (!this.centShopInfo.lianxiName) {
					uni.$u.toast("请输入联系人！");
					return;
				}
				if (!this.centShopInfo.lianxiPhone) {
					uni.$u.toast("请输入联系电话！");
					return;
				}

				addUserInfoCentShop({
					userInfoId: this.formData.userInfoId,
					centShopId: this.formData.centShopId,
					lianxiName: this.centShopInfo.lianxiName,
					lianxiPhone: this.centShopInfo.lianxiPhone
				}).then(res => {
					uni.$u.toast(res.msg);
					setTimeout(function(){
						uni.navigateBack({
							delta: 1
						})
					},1000)
				})

			}

		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.top {
		border-top: 20rpx solid #f1f1f1;
	}

	.cell {
		padding: 20rpx;
		border-bottom: 1px solid #f1f1f1;

		.tx {
			margin: 0 auto;
			width: 50px;
			height: 50px;
			font-size: 0;
			margin-bottom: 10px;
			overflow: hidden;
			border: 1px solid #e0e0ef;
			background-color: #e0e0ef;
			border-radius: 50%;
			padding: 0;
		}

		.uni-input {
			text-align: left;
			height: 80rpx;
			width: 100%;
		}
	}

	.btn-css {
		background-color: #eee;
		color: #81D8CF;
		padding: 6rpx 20rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
		border: unset;
		width: 200rpx;
		margin: 0;
	}

	button::after {
		border: unset;
	}


	.comfirm-css {
		background-color: #81D8CF;
		color: #fff;
		width: 96%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		margin: 0 auto;
		margin-top: 100rpx;
		text-align: center;
		border-radius: 100rpx;
		border: none;
	}

	.tips {
		margin: 20rpx;
		color: #666;
		font-size: 24rpx;
		color: #df9400;
	}

	.text-left {
		margin-left: 20rpx;
	}
</style>